<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript" src="vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style type="text/css">
        el-input{
            width: 10px;
        }

    </style>
</head>
<body>

</span>
<div id="app">
    <el-divider><i class="el-icon-mobile-phone"></i>基本信息</el-divider>
    <span style="color:#98999b; margin: 10px 600px;">头像</span>
    <form id="bar" enctype="multipart/form-data" style="margin: 5px 630px;">
        <input type="hidden" v-model="mineInfo.id" name="id">
        <img :src="mineInfo.uicon" width="150px" height="150px" id="haha" style="border-radius: 150px; border: 1px solid black;"/>
        <input width="100px" name="pic" type="file" id="pic" />
    </form>
    <el-form v-model="mineInfo" status-icon :rules="rules" ref="mineInfo" label-width="100px"
             class="demo-ruleForm" style="margin-left: 530px;">
        <!--<el-input type="hidden" v-model="mineInfo.id" style="width: 300px;"></el-input>-->
        <el-form-item label="昵称" prop="uname">
            <el-input type="text" v-model="mineInfo.uname" style="width: 300px;"></el-input>
        </el-form-item>

        <el-form-item label="性别" prop="usex">
            <el-input type="text" v-model="mineInfo.usex" style="width: 300px;"></el-input>
        </el-form-item>

        <el-form-item label="年龄" prop="age">
            <el-input type="text" v-model="mineInfo.age" style="width: 300px;"></el-input>
        </el-form-item>

        <el-form-item label="地址" prop="location">
            <el-input v-model.number="mineInfo.location" style="width: 300px;"></el-input>
        </el-form-item>
        <div>
            <el-button type="success" id="foo" style="margin-left: 190px;">提交</el-button>
            <el-button type="success" plain @click="back()">返回</el-button>
        </div>
    </el-form>


</div>


<script type="text/javascript">

    var app = new Vue({
        el:"#app",
        data:{
            mineInfo:{},
            uid:0
            /*rules:{
                age:[
                    {
                        pattern:/^([0-9]|[1-9]\d|1dd|1[0-4]\d|15[0-5])$/,
                        message:'范围在0-155',
                        trigger: 'blur'
                    }
                ]
            }*/
        },
        methods:{
            back:function () {
                window.parent.location.href = "/cai/indexTwo.html";
            }
        }
    });
    $.get("/cai/consumer/getUid",function (backData) {
        app.uid = backData.data;
        $.get("/cai/mine/list/"+app.uid,function (listBackData) {
            app.mineInfo = listBackData.data;
        });
    });
    pic.onchange=function(){
        var r=new FileReader();
        r.readAsDataURL(pic.files[0]);
        r.onload=function(){
            haha.src=r.result;
        }
    };
    foo.onclick=function(){

        var userData=new FormData(bar);

        $.ajax({
            url: "/cai/mine/uploadUicon",
            type: "POST",
            data: userData,
            processData: false,
            contentType: false,
            success: function(data) {
                if(data.code == 1){
                    update();
                }
            }
        });
    }
    function update() {
       /* app.mine.uname = app.mineInfo.uname;
        app.mine.usex = app.mineInfo.usex;
        app.mine.uid   = app.mineInfo.id;*/
        $.post("/cai/mine/updateMine", app.mineInfo, function (backData) {
            if (backData.code == 1) {
                app.$notify({
                    title: '温馨提示',
                    message: backData.msg,
                    type: 'success'
                });
            } else {
                app.$notify.error({
                    title: '温馨提示',
                    message: '性别请输入男&女'
                });
            }
        });
    }

</script>
</body>
</html>
